import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

// uno.config.ts
export default defineConfig({
  shortcuts: [
    ['n-tab', 'tracking-wide uppercase p2 border-b-2 border-transparent transition color-white'],
    ['p-fixed-center', 'pos-fixed top-0 bottom-0 left-0 right-0 ma z-99'],
    {
      'absolute-center': 'absolute top-0 bottom-0 left-0 right-0'
    }
  ],
  theme: {
    colors: {
      // ...
    }
    // breakpoints: {
    //   xxs: '0px',
    //   xs: '320px',
    //   sm: '480px',
    //   md: '768px',
    //   lg: '1024px',
    //   xl: '1280px',
    //   xxl: '1600px'
    // }
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'PingFang SC',
        serif: 'DM Serif Display',
        mono: 'DM Mono'
      }
    })
  ],
  rules: [
    [/^bg-(.+)$/, ([_, color]) => ({ background: `#${color}` })],
    [/^bl-(.+)$/, ([_, color]) => ({ border: `1px solid #${color}` })],
    [/^bbc-str-(.+)$/, ([_, color]) => ({ 'border-color': `#${color}` })],
    [/^ct-(.+)$/, ([_, color]) => ({ color: `#${color}` })],
    [
      /^gradient-(.+)-(.+)-(.+)$/,
      ([_, to, form, deg]) => ({
        background: `linear-gradient(${deg}deg, #${to}, #${form})`
      })
    ]
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()]
})
